<template>
  <div class="bottom-bar tools-bar">
    <div ref="barLeft" class="bar-left">
      <template v-if="toolList.length">
        <template v-for="(item,index) in toolList">
          <template v-if="index < count">
            <icon-button
              v-if="item.type !== 'see'"
              :key="index"
              :icon="item.icon"
              :disabled="disabled || item.disabled"
              :title="item.label"
              :on="(item.type === 'videotape' && isRecording) || (item.type === 'audio' && !isMuted)"
              @click="$emit('enter-btn',item)"
            />
            <template v-else>
              <el-popover
                ref="popper"
                placement="top-end"
                width="auto"
                trigger="hover"
                :disabled="disabled"
                @show="popperShow"
              >
                <el-radio-group v-model="videoType" @change="$emit('video-type-change',$event)">
                  <el-radio-button label="contain">适应</el-radio-button>
                  <el-radio-button label="cover">填充</el-radio-button>
                  <el-radio-button label="fill">拉伸</el-radio-button>
                </el-radio-group>
                <icon-button
                  slot="reference"
                  :key="index"
                  :icon="item.icon"
                  :disabled="disabled || item.disabled"
                  :title="item.label"
                  style="margin-left: 10px;"
                />
              </el-popover>
            </template>
          </template>
        </template>
        <el-dropdown
          v-if="isMore"
          class="dropdown-main"
          trigger="click"
          placement="top"
          :hide-on-click="false"
          @visible-change="dropdownVisible"
        >
          <icon-button
            icon="el-icon-more"
            title="更多"
            :on="isShow"
          />
          <el-dropdown-menu slot="dropdown">
            <template v-for="(item,index) in toolList">
              <el-dropdown-item v-if="index >= count" :key="index">
                <icon-button
                  v-if="item.type !== 'see'"
                  :key="index"
                  :icon="item.icon"
                  :disabled="disabled || item.disabled"
                  :title="item.label"
                  :on="(item.type === 'videotape' && isRecording) || (item.type === 'audio' && !isMuted)"
                  @click="$emit('enter-btn',item)"
                />
                <template v-else>
                  <el-popover
                    ref="popper"
                    placement="top-end"
                    width="auto"
                    trigger="hover"
                    :disabled="disabled"
                    @show="popperShow"
                  >
                    <el-radio-group v-model="videoType" @change="$emit('video-type-change',$event)">
                      <el-radio-button label="contain">适应</el-radio-button>
                      <el-radio-button label="cover">填充</el-radio-button>
                      <el-radio-button label="fill">拉伸</el-radio-button>
                    </el-radio-group>
                    <icon-button
                      slot="reference"
                      :key="index"
                      :icon="item.icon"
                      :disabled="disabled || item.disabled"
                      :title="item.label"
                    />
                  </el-popover>
                </template>
              </el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </div>
    <div v-if="layoutConfig.showFrame && layoutConfig.playMode === 0" class="bar-right">
      <span>{{ bitrate }}</span>
      <span>{{ frame }}</span>
    </div>
  </div>
</template>

<script>
import buttons from '../../../../data/buttons.json'
import IconButton from '../../../common/IconButton'
import { defaultState } from '@/components/VideoManagement/mixins'

export default {
  name: 'BottomBar',
  components: { IconButton },
  mixins: [defaultState],
  props: {
    titleShow: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: true
    },
    frame: {
      type: String,
      default: ''
    },
    bitrate: {
      type: String,
      default: ''
    },
    isRecording: {
      type: Boolean,
      default: false
    },
    isMuted: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      videoType: 'contain',
      toolList: [],
      count: 4,
      isMore: false,
      isShow: false
    }
  },
  watch: {
    videoLayoutType: {
      handler: function(val) {
        this.maxCount()
      },
      deep: true
    }
  },
  created() {
    this.setToolList()
  },
  methods: {
    dropdownVisible(flag) {
      this.isShow = flag
    },
    // popper改样式
    popperShow() {
      this.$refs['popper'][0].$refs['popper'].style.backgroundColor = '#333'
      this.$refs['popper'][0].$refs['popper'].lastChild.style.bottom = '-7px'
    },
    setToolList() {
      this.toolList = []
      const ids = this.layoutConfig.playMode === 0 ? this.layoutConfig.buttonIds : '2,3,6,see'
      if (ids) {
        ids.split(',').forEach((item, index) => {
          const _item = buttons.filter(itm => {
            if (itm.id === item) {
              return itm
            }
          })
          this.toolList = [...new Set([...this.toolList, ..._item])]
          if (index === ids.split(',').length - 1) {
            this.$nextTick(() => {
              this.maxCount()
            })
          }
        })
      }
    },
    maxCount() {
      const _count = parseInt((this.$refs['barLeft'].clientWidth) / 50)
      this.isMore = this.toolList.length > _count
      this.count = this.isMore ? (_count >= 2 ? _count - 2 : 0) : _count
    }
  }
}
</script>

<style scoped lang="scss">
.el-radio-group /deep/ {
  .el-radio-button__inner {
    padding: 5px 10px;
    background-color: transparent;
    border-color: transparent;
    color: rgba(255, 255, 255, .6);
    box-shadow: none;
  }

  .el-radio-button__inner:hover {
    color: #409EFF;
  }

  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: white;
  }
}

.h-button + .dropdown-main {
  margin-left: 10px;
}

.el-dropdown-menu /deep/ {
  background: #333333;

  .popper__arrow::after {
    bottom: 0;
  }

  .el-dropdown-menu__item {
    text-align: center;

    i {
      margin-right: 0;
    }
  }

  .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
    background: transparent;
  }
}

.bottom-bar {
  width: 100%;
  height: 30px;
  line-height: 30px;
  transition: all .2s ease-in-out;
  background: #606266;
  display: flex;
  align-items: center;
  justify-items: center;
  padding: 0 10px;

  .bar-left {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
  }

  .bar-right {
    width: 150px;
    text-align: right;
    font-size: 12px;

    span + span {
      margin-left: 10px;
    }
  }
}
</style>
